<!DOCTYPE html><html lang="zh-CN"><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Webpack | Moment.js &#x6587;&#x6863;</title>
  <link rel="stylesheet" href="static/css/style.css">
  <link rel="shortcut icon" href="http://momentjs.cn/static/img/moment-favicon.png">
  <link rel="stylesheet" href="static/css/atom-one-light.min.css">
</head>
<body class="is-moment">
  <div class="hero hero-oneline">
    <div class="hero-centered">
      <h1>Webpack</h1>
    </div>
  </div>
  <div id="api-section-__FILENAME__">
    <div id="content" class="clearfix">
  
      <div id="column1" data-id="__ID__" class="interior">
        <header>
          <!-- <h1>Webpack</h1> -->
          <div id="gtoc">
            <ul>
              <!-- <li>v</li> -->
              <li>
                <a href="index.html#/use-it/webpack/" name="toc">&#x8FD4;&#x56DE;&#x4E0A;&#x5C42;&#x6587;&#x6863;</a>
              </li>
              <li style="border: none;">
                <a href="javascript:window.open('https://github.com/momentjscn/moment-docs-cn/edit/master/moment/00-use-it/08-webpack.md');" rel="nofollow" target="_blank">&#x63D0;&#x4EA4;&#x4FEE;&#x6539;</a>
              </li>
              <!-- <li>
                <a href="/search__SEARCH_PARAM__" name="toc">搜索</a>
              </li> -->
            </ul>
          </div>
          <hr>
        </header>

        <div id="biz_item"></div>
  
        <div id="apicontent">
          <div id="content_left">
<pre><code>npm install moment
</code></pre>
<pre><code class="language-javascript">var moment = require(&apos;moment&apos;);
moment().format();
</code></pre>
<p>&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;webpack &#x4F1A;&#x6253;&#x5305;&#x6240;&#x6709;&#x7684; Moment.js &#x8BED;&#x8A00;&#x73AF;&#x5883;&#xFF08;&#x5728; Moment.js 2.18.1 &#x4E2D;&#xFF0C;&#x6700;&#x5C0F;&#x4E3A; 160 KB&#xFF09;&#x3002;
&#x82E5;&#x8981;&#x5265;&#x79BB;&#x4E0D;&#x5FC5;&#x8981;&#x7684;&#x8BED;&#x8A00;&#x73AF;&#x5883;&#x4E14;&#x4EC5;&#x6253;&#x5305;&#x4F7F;&#x7528;&#x7684;&#x8BED;&#x8A00;&#x73AF;&#x5883;&#xFF0C;&#x5219;&#x6DFB;&#x52A0; <a href="javascript:window.open('http://nodejs.cn/s/kATSRF');" target="_blank" rel="nofollow"><code>moment-locales-webpack-plugin</code></a>&#xFF1A;</p>
<!-- skip-example -->
<pre><code class="language-javascript">// webpack.config.js
const MomentLocalesPlugin = require(&apos;moment-locales-webpack-plugin&apos;);

module.exports = {
    plugins: [
        // &#x5265;&#x79BB;&#x9664; &#x201C;en&#x201D; &#x4EE5;&#x5916;&#x7684;&#x6240;&#x6709;&#x8BED;&#x8A00;&#x73AF;&#x5883;&#x3002;
        new MomentLocalesPlugin(),

        // &#x6216;&#x8005;&#xFF1A;&#x5265;&#x79BB;&#x9664; &#x201C;en&#x201D;&#x3001;&#x201C;es-us&#x201D; &#x548C; &#x201C;ru&#x201D; &#x4EE5;&#x5916;&#x7684;&#x6240;&#x6709;&#x8BED;&#x8A00;&#x73AF;&#x5883;&#x3002;
        //&#xFF08;&#x201C;en&#x201D; &#x5185;&#x7F6E;&#x4E8E; Moment &#x4E2D;&#xFF0C;&#x65E0;&#x6CD5;&#x79FB;&#x9664;&#xFF09;
        new MomentLocalesPlugin({
            localesToKeep: [&apos;es-us&apos;, &apos;ru&apos;],
        }),
    ],
};
</code></pre>
<p>&#x8FD8;&#x6709;&#x5176;&#x4ED6;&#x8D44;&#x6E90;&#x53EF;&#x4EE5;&#x4F7F;&#x7528; webpack &#x4F18;&#x5316; Moment.js&#xFF0C;<a href="javascript:window.open('http://nodejs.cn/s/DGq38P');" target="_blank" rel="nofollow">&#x4F8B;&#x5982;&#x8BE5;&#x8D44;&#x6E90;</a>&#x3002;</p>
					</div>
          <div id="content_right">
<pre><code>npm install moment
</code></pre>
<pre><code class="language-javascript">var moment = require(&apos;moment&apos;);
moment().format();
</code></pre>
<p><strong>Note:</strong> By default, webpack bundles <em>all</em> Moment.js locales (in Moment.js 2.18.1, that&#x2019;s 160 minified KBs). To strip unnecessary locales and bundle only the used ones, add <a href="javascript:window.open('https://www.npmjs.com/package/moment-locales-webpack-plugin');" target="_blank" rel="nofollow"><code>moment-locales-webpack-plugin</code></a>:</p>
<!-- skip-example -->
<pre><code class="language-javascript">// webpack.config.js
const MomentLocalesPlugin = require(&apos;moment-locales-webpack-plugin&apos;);

module.exports = {
    plugins: [
        // To strip all locales except &#x201C;en&#x201D;
        new MomentLocalesPlugin(),

        // Or: To strip all locales except &#x201C;en&#x201D;, &#x201C;es-us&#x201D; and &#x201C;ru&#x201D;
        // (&#x201C;en&#x201D; is built into Moment and can&#x2019;t be removed)
        new MomentLocalesPlugin({
            localesToKeep: [&apos;es-us&apos;, &apos;ru&apos;],
        }),
    ],
};
</code></pre>
<p>There are other resources to optimize Moment.js with webpack, <a href="javascript:window.open('https://github.com/jmblog/how-to-optimize-momentjs-with-webpack');" target="_blank" rel="nofollow">for example this one</a>.</p>
					</div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="static/js/highlight.min.js"></script>
  <script src="static/js/javascript.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <script>var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?7a7f78c805fbacc7e075d34f153031aa"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();</script>

  <style>
    .hero-centered {
      margin: 0;
          margin-left: 10px;
    }
#gtoc ul {
  list-style: none;
  margin-left: 0;
  line-height: 1.5rem;
  padding: 0;
}
#gtoc>ul>li {
  display: inline;
  border-right: 1px solid #000;
  margin-right: .4rem;
  padding-right: .4rem;
}
#gtoc>ul>li>a {
  color: #61b2a7;
}
#content_left {
  width: 49%;float: left;border-right: 1px solid #eee;    padding-right: 2%;
}
#content_right {
float: left;width: 48%;margin-left: 3%;
}
#column1 {
  padding: 0 2rem;
}
  </style>


</body></html>